<template>
	<view class="register">
		<toSafe :bgColor="'#fff'"></toSafe>
		<view class="search-top">
			<view class="icon" @click="HandleReturn">
				<uni-icons type="left" size="30" style="margin-right: 20rpx;"></uni-icons>
			</view>
			<view class="title">现 场 签 到</view>
		</view>
		<!-- <view class="info-search">
			<view class="search_icons">
				<view class="icon">
					<uni-icons type="search" size="20" color="#797979"></uni-icons>
				</view>
				<input class="uni-input" focus v-model="keyword" placeholder="搜索公司名称、类型" />
				<view @click="search" class="search">搜索</view>
			</view>
		</view> -->
		<view class="register-body">
			<view class="user-info">
				<image src="../../punlic/image/gyl.jpg" mode=""></image>
				<view class="info">
					<text>{{userInfo.userName}}</text>
					<text>{{userCompany}}</text>
				</view>
			</view>
			<view class="register-address">
				<view class="address-label" @click="toMap">
					请输入签到地址
				</view>
				<up-input placeholder="请输入" border="bottom" clearable v-model="address"></up-input>
			</view>
			<view class="register-btn">
				<!-- <up-button class="btn-detail" @click="signinClick"> -->
				<up-button class="btn-detail" @click="toMap">
					<text>现场签到</text>
					<text>{{dayjs(new Date()).format('hh:mm:ss')}}</text>
				</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		UserInfo
	} from '@/api/User.js'
	import toSafe from '@/compoents/top-safe.vue'
	import dayjs from 'dayjs'
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	let lat = ref()
	let long = ref()
	let address = ref()
	let userInfo = reactive({})
	let userCompany = ref()
	onLoad(() => {
		getUserInfo()
	})
	const getUserInfo = () => {
		UserInfo().then(res => {
			if (res.code == 200) {
				Object.assign(userInfo, res.user)
				if (res.maintainCompany && res.maintainCompany.companyName !== '') {
					userCompany.value = res.maintainCompany.companyName
				} else {
					userCompany.value = '暂未关联公司'
				}
			}
		})
	}
	const toMap = () => {
		let _key = '1a82816c2c51c74dfc02e6207b4f89d9'; //高德API key类型：web服务
		uni.request({
			method: 'GET',
			url: 'https://restapi.amap.com/v3/ip',
			data: {
				key: _key,
				output: 'JSON'
			},
			success: async (res) => {
				console.log('经纬度', res);
				uni.showToast({
					title: '打卡成功！'
				})
				address.value = `打卡地址：${res.data.province}-${res.data.city}`

				let rectangle = res.data.rectangle
				//由于rectangle返回的是左下右上对标对，所以需要拆分，将两个经纬度分开
				let pointsStr = rectangle.split(';');
				// 创建一个新的数组来保存最终的经纬度
				let coordinates = [];
				// 对每个点的字符串再按照逗号进行分割，并将结果转换为浮点数
				pointsStr.forEach(point => {
					let [lng, lat] = point.split(',')
					// 将分割后的经度和纬度添加到数组中
					coordinates.push([Number(lng), Number(lat)]);
				});
				uni.request({
					method: 'GET',
					url: 'https://restapi.amap.com/v3/staticmap',
					data: {
						key: _key,
						zoom: [1, 17],
						output: 'JSON',
						location: rectangle
					},
					success: async (res) => {
						console.log(res, 888);
					}
				})
				// uni.getLocation({
				// 	latitude: coordinates[0][0],
				// 	longitude: coordinates[1][1],
				// 	success(res) {
				// 		console.log('res', res);
				// 	}
				// })
				// console.log('rectangle数组', coordinates);
			},
			fail: r => {
				console.log(r);
			}
		});
	}
	const toMap2 = () => {
		let _key = '1a82816c2c51c74dfc02e6207b4f89d9'; //高德API key类型：web服务
		uni.request({
			method: 'GET',
			url: 'https://restapi.amap.com/v3/staticmap',
			data: {
				key: _key,
				scale: 1,
				zoom: [1, 17],
				output: 'JSON'
			},
			success: async (res) => {
				console.log(res, 888);
			}
		})
	}
	const signinClick = () => {
		uni.showToast({
			title: '签到成功'
		})
	}
	const HandleReturn = () => {
		uni.navigateBack();
	}
	const search = () => {
		uni.navigateTo({
			url: '/pages/Classify/Classify?keyword=' + keyword.value.trim()
		})
	}
</script>

<style lang="less" scoped>
	@import "../../App.less";

	.register {
		width: 100%;
		height: 100%;
		background-color: #F6F8FA;

		.search-top {
			height: 88rpx;
			display: flex;
			align-items: center;
			background-color: #fff;

			.icon {
				width: 10vw;
				height: 88rpx;
				line-height: 88rpx;
				z-index: 1;
			}

			.title {
				width: 90vw;
				line-height: 88rpx;
				height: 88rpx;
				text-align: center;
				margin-left: -8vw;
				font-size: 34rpx;
				font-weight: 700;
			}
		}

		.info-search {

			.search_icons {
				margin: 20rpx 0;
				.inline_center();
				width: 100%;
				height: 68rpx;
				padding: 16rpx 20rpx;
				background-color: #F2F2F2;
				border-radius: 34rpx;

				.icon {
					margin-right: 10rpx;
				}

				.uni-input {
					width: 100%;
					border-right: 1px solid #325EF5;
					margin-right: 20rpx;
					height: 100%;
				}

				.search {
					background-color: inherit;
					width: 100rpx;
					height: 68rpx;
					font-size: 32rpx;
					color: #325EF5;
					line-height: 68rpx;
				}
			}
		}

		.register-body {
			height: calc(100vh - 88rpx);
			width: 100%;
			padding: 20rpx 31rpx;
			display: flex;
			flex-direction: column;

			.user-info {
				width: 100%;
				height: 120rpx;
				background-color: #fff;
				border-radius: 12rpx;
				display: flex;
				padding: 20rpx;

				>image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 8rpx;
					margin-right: 20rpx;
				}

				.info {
					.inline_column_space_between();

					>text:nth-child(1) {
						font-size: 28rpx;
					}

					>text:nth-child(2) {
						font-size: 24rpx;
						opacity: 0.5;
					}
				}
			}

			.register-address {
				width: inherit;
				height: 160rpx;
				border-radius: 12rpx;
				background-color: #fff;
				margin-top: 20rpx;
				padding: 20rpx;
				overflow: hidden;
				.inline_column_space_between();
			}

			.register-btn {
				height: 100%;
				width: 100%;
				background-color: #fff;
				border-radius: 12rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20rpx;

				.btn-detail {
					width: 260rpx;
					height: 260rpx;
					border-radius: 50%;
					background-color: #325EF5;
					color: #fff;
					.inline_column_center();

					>text:nth-child(1) {
						font-size: 34rpx;
						margin-bottom: 6rpx;
					}

					>text:nth-child(2) {
						font-size: 24rpx;
						opacity: 0.5;
					}
				}
			}
		}

	}
</style>